<style lang='less'>
div,
img {
  margin: 0;
  padding: 0;
}
img {
  float: left;
  height: 100px;
  width: 150px;
}
#div1 {
  width: 200px;
  height: 100px;
  overflow: hidden;
//    border: solid blue 2px;
}
#div2,
#div3 {
  float: left;
}
#div4 {
  width: 500%; /*这个属性很重要 让容器有足够的宽度实现滚动*/
  float: left;
}
</style>

<template>
  <div id='div1'>
    <div id='div4'>
      <div id='div2'>
        <img src='@/assets/images/carousel/Koala.jpg' alt='图片1'>
        <img src='@/assets/images/carousel/Chrysanthemum.jpg' alt='图片2'>
        <img src='@/assets/images/carousel/Hydrangeas.jpg' alt='图片3'>
        <img src='@/assets/images/carousel/Penguins.jpg' alt='图片4'>
      </div>10
      <div id='div3'></div>
      <!--这个容器是用来防止图片滚动时会出现空白的区域-->
    </div>
  </div>
</template>

<script>
window.onload = function () {
  var v1 = document.getElementById('div1')
  var v2 = document.getElementById('div2')
  var v3 = document.getElementById('div3')

  v3.innerHTML = v2.innerHTML // 将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。
  function fun () {
    if (v1.scrollLeft <= 0) {
      v1.scrollLeft = 800
    } else {
      v1.scrollLeft--
    }
  }

  var fun1 = setInterval(fun, 10)

  v1.onmouseover = function () {
    // 鼠标经过时  清除定时器  停止图片的滚动
    clearInterval(fun1)
  }
  v1.onmouseout = function () {
    // 鼠标离开后  继续滚动图片
    fun1 = setInterval(fun, 10)
  }
}
</script>
